<template>
    <div class="show_con clearfix">
        <!-- 影院和地点 -->
        <div class="show_title_h3 clearfix" >
            <h3>{{cinemaData.nm}}</h3>
            <p>{{cinemaData.addr}}</p>
        </div>
         <!-- swiper -->
         <div class="swiper_bgimg clearfix">
             <div class="swiper_bgimg1 clearfix" v-if="sp1!=-1">
                  <img  :src="picFix(showData.movies[sp1].img)" alt="">
             </div>
             <swiper ref="mySwiper" :options="swiperOption">
                <swiper-slide 
                    class="swiper_con" 
                    v-for="movies in showData.movies" 
                    :key='movies.id'>
                    <div id="swiper_img">
                        <img :src="picFix(movies.img)" alt="">
                    </div>
                </swiper-slide>
            </swiper>
         </div>
         <!-- 电影信息文案 -->
        <div class="title_list_con clearfix" v-if="sp1!=-1">
            <div class="list_con_nm">{{showData.movies[sp1].nm}}</div>
            <div class="list_con_sc">{{showData.movies[sp1].sc}}分</div>
            <div class="list_con_desc">{{showData.movies[sp1].desc}}</div>
        </div>

        <div class="show_con_list clearfix"  v-if="sp1!=-1">
            <div class="con_list_time clearfix">
                <div class="movie_list_con" :class="{color:index==i}" :index='i' v-for="(item,i) in showData.movies[sp1].shows" :key="item.id">
                    <!-- 遍历该影片的所有的日期，并且绑定点击事件，当点击时， -->
                    <div class="movie_list_time clearfix">
                        <div @click="showClick(i)" >{{item.dateShow}}</div>
                    </div>
                </div>
                <!-- showData vipInfo -->
                <div class='movie_list_Vip' v-for="item3 in showData.vipInfo" :key="item3.id">
                    <span class='list_vip1'>{{item3.tag}}</span>
                    <span class='list_vip2'>{{item3.title}}</span>
                    <span class='list_vip3'>{{item3.process}}</span>
                </div>
                <div class="con_list_text" v-if='sp2!=-1'>
                    <div class="plist_list_con clearfix" v-for="item2 in showData.movies[sp1].shows[sp2].plist" :key="item2.id">
                        <div class="list_con1 clearfix">
                            <div class="list_con1_time">{{item2.tm}}</div>
                            <div>永不散场</div>
                        </div>
                        <div class="list_con2 clearfix">
                            <div class="list_con2_lang">
                                <span >{{item2.lang}}</span>
                                <span>{{item2.tp}}</span>
                            </div>
                            <div>{{item2.th}}</div>
                        </div>
                        <div class="list_con3 clearfix">
                            <div class="list_con3_price">
                                <span class="con3_price1">￥{{priceNum(item2.vipPrice)}}</span>
                                <span class="con3_price2">{{item2.vipPriceName}}</span>
                                <span class="con3_price3">￥{{item2.vipPrice}}</span>
                                <!-- <span class="con3_price4" v-html='item2.sellPr'></span> -->
                            </div>
                            <div class="con3_hui">{{item2.extraDesc}}</div>
                        </div>
                        <div class="list_con4">
                            <span class="list_btn">购买</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 套餐内容 -->
        <div class="dealList_con clearfix">
            <div class="dealList_title">
                <h2>影院超值套餐</h2>
            </div>
            
            <div class="dealList_list_con" v-for="dealCon in dealList.dealList" :key="dealCon.id">
                
                <div class="con_img">
                    <img :src="picFix(dealCon.imageUrl)" alt="">
                </div>
                <div class="con_all">
                    <div class="con_title">
                        <span class="con_tag" >双人</span>{{dealCon.title}}
                    </div>
                    <div class="con_price">￥{{dealCon.price}}</div>
                   
                </div>
                <div class="con_btn">
                     <div class="con_yishou">{{dealCon.curNumberDesc}}</div>
                     <div class="con_btn_btn">去购买</div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>

import '../scss/shows.scss';

export default {
    created(){
        //应用场景：结合$refs属性内的对象使用，或者获取页面内容渲染后的尺寸
        this.$nextTick(function(){
            //DOM渲染完成后触发
            // console.log('nextTick refs',this.$refs.mySwiper);  
        })
        this.cinemaId = this.$route.params.cinemaId;
        this.movieId = this.$route.query.movieId;
        this.axios.get('/ajax/cinemaDetail',{
            params:{
                cinemaId: this.cinemaId,
                movieId: this.movieId,
            }
        }).then((res)=>{
            this.showData = res.data.showData;
            this.cinemaData = res.data.cinemaData;
            this.dealList = res.data.dealList;
            console.log('总数据',res)
            console.log('套餐数据',this.dealList);
        })
        this.$nextTick(()=>{
        // 改变index的方法
        // this.swiper.slideTo(res.data.movieIndex,1000,false)
            console.log(this.$refs);
            console.log(this.$refs);
            // 请求完成后 增加 监听事件 reachEnd到达最后一张
            this.$refs.mySwiper.$on("reachEnd",()=>{
                console.log("reachEnd");
            })
            this.$refs.mySwiper.$on("transitionEnd",()=>{
                // console.log("transitionEnd" , this.swiper.activeIndex);
                this.sp1= this.swiper.activeIndex;
                // 1,把这个图片的id(这个电影的所有内容)记录下来，
                this.sp2=0;
            })
        })
    },
    data(){
        return {
            sp1:-1,
            sp2:0,
            money:4,
            item:'',
            index:'',
            cinemaId:'',
            movieId:'',
            showData:{},
            cinemaData:{},
            dealList:{},
            // 轮播图插件
            mySwiper:'',
            clickImg:'',
            swiperOption: {
                slidesPerView: 4,
                spaceBetween: 30,
                centeredSlides: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                on:{
                    // transitionend: ()=>{
                    //     // this.clickImg =this.swiper.clickedIndex;
                    //     // console.log('点击的图片下标',this.clickImg);
                    //     console.log(this.swiper);
                        
                    // },
                },
            },
        }
    },
    methods:{
        picFix(url){
            if(typeof url == 'string'){
                return url.replace('w.h','128.180');
            }
        },
        showClick(index){
            console.log('获取点击的下标',index);
            this.index = index;
        },
        priceNum(price){
            return parseFloat(price)+4;
        }
    },
    computed:{
      swiper() {
        //   获取swiper实例里的数据，包含改变index的方法
        return this.$refs.mySwiper.swiper
      },

    },
}
</script>
